<template>
  <div>
    <u-navbar title="系统消息"> </u-navbar>
    <div class="drop-list">
      <div class="drop-list-tab">
        <u-tabs :list="list" active-color="#333" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
      </div>

    </div>
    <div class="global-list">
      <u-collapse v-if="messageData.length != 0">
        <u-collapse-item class="item" :title="item.title" @change="changeMessage" @click="handleClickBill(item)" v-for="(item,index) in messageData[list[current].value].records" :index="index"
          :key="index">
          <div class="content"> {{item.content}}</div>

          <div class="del" v-if="item.status == 'ALREADY_READY'" @click="handleDeleteMessage(item)">删除</div>
          <div class="del" v-if="item.status == 'ALREADY_REMOVE'">
            <span @click="handleReductionMessage(item)">还原消息</span>
            <span @click="handleClearMessage(item)">彻底删除</span>
          </div>
        </u-collapse-item>
      </u-collapse>
    </div>
  </div>
</template>

<script>
import {
  getAllMessage,
  readMessage,
  deleteMessage,
  reductionMessage,
  clearMessage,
} from "@/api/home";
export default {
  watch: {
    current(index) {
      this.searchForm.billStatus = this.list[index].value;
      this.load();
    },
  },

  data() {
    return {
      messageData: [],
      current: 0,
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        startDate: "", // 起始时间
        endDate: "", // 终止时间
        status: "UN_READY",
      },
      list: [
        {
          name: "未读消息",
          value: "UN_READY",
        },
        {
          name: "已读消息",
          value: "ALREADY_READY",
        },
        {
          name: "回收站",
          value: "ALREADY_REMOVE",
        },
      ],
    };
  },

  methods: {
    onShow() {
      this.messageData = [];
      this.searchForm.pageNumber = 1;
      this.init();
    },
    onReachBottom() {
      this.searchForm.pageNumber++;
      this.init();
    },

    // 已读消息
    async changeMessage(val) {
      // 如果回调的show为 true 说明看见了内容，标记为已读
      if (val.show) {
        // 判断是否是未读的选项
        let key = this.list[this.current].value;
        if (key == "UN_READY") {
          await readMessage(this.messageData[key].records[val.index].id);
        }
      }
    },

    //已读消息中点击删除 ，将消息删到回收站里面
    async handleDeleteMessage(val) {
      let res = await deleteMessage(val.id);
      if (res.data.success) {
        uni.showToast({
          title: "删除成功!",
          duration: 2000,
          icon: "none",
        });
        this.load();
      }
    },

    // 还原消息
    async handleReductionMessage(val) {
      await reductionMessage(val.id);
      this.load();
    },

    // 彻底清空消息
    async handleClearMessage(val) {
      await clearMessage(val.id);
      this.load();
    },

    changeTabs(index) {
      this.current = index;
    },

    load() {
      this.searchForm.pageNumber = 1;
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.messageData = [];
      this.init();
    },
    
    async init() {
      uni.showLoading({
        title: "加载中",
      });
      let res = await getAllMessage(this.searchForm);
      if (res.data.success) {
        this.messageData = res.data.result;
      }
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/components/global.scss";
.global-list {
  padding: 34rpx;
}
.drop-list-tab {
  overflow: hidden;
  flex: 1 !important;
}
.item {
  display: flex;
  flex-direction: column;
}
.content {
  color: #333 !important;
}
.del {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  > span {
    margin: 0 8rpx;
  }
}
</style>